<extend name="Index/index"/>

<block name="register">
    <!-- 注册开始 -->
    <div class="conatiner mt40">
        <div class="clearfix mt40"></div>
        <h1 class="text-center mt40">立即注册</h1>
        <hr>

        <form action="{{:U('User:regDo')}}" method="post" class="form-horizontal col-md-6 col-md-offset-3 h4" id="register">

            <div class="form-group">
                <label for="user" class="col-md-3 control-label">用户名</label>
                <div class="col-md-9">
                    <input type="text" name="name" class="form-control" id="user" placeholder="请输入用户名..">
                    <span class="text-info">* 以字母开头,4-15个字符,由数字字母下划线组成</span>
                </div>
            </div>

            <div class="form-group ">
                <label for="sex" class="col-md-3 control-label">性别</label>
                <div class="col-md-9">
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="sex" checked value="0"> 男
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="sex" id="sex"  value="1"> 女
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label for="pwd" class="col-md-3 control-label">密码</label>
                <div class="col-md-9">
                    <input type="password" name="pwd" class="form-control" id="pwd" placeholder="请输入密码..">
                    <span class="text-info">* 由4-20位组成</span>
                </div>
            </div>

            <div class="form-group">
                <label for="repwd" class="col-md-3 control-label">确认密码</label>
                <div class="col-md-9">
                    <input type="password" name="repwd" class="form-control" id="repwd" placeholder="把上面那家伙再来一次">
                    <span class="text-info">* 与上面密码要一致</span>
                </div>
            </div>

            <div class="form-group">
                <label for="tel" class="col-md-3 control-label">手机</label>
                <div class="col-md-9">
                    <input type="text" name="tel" class="form-control" id="tel" placeholder="手机号有11位...">
                    <span  class="text-info">* 请输入合法的手机号</span>
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-md-3 control-label">邮箱</label>
                <div class="col-md-9">
                    <input type="email" name="email" class="form-control" id="email" placeholder="请输入邮箱">
                    <span class="text-info">* 请输入合法的邮箱</span>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <div class="pull-left">
                        <input type="text" name="vcode" id="code" class="form-control" placeholder="验证码">
                        <span class="text-info"></span>
                    </div>
                    <div class="pull-right">
                        <img src="{{:U('User:verify')}}" title="点 我 刷 新" style="cursor:pointer" onclick="this.src=this.src+'?i='+Math.random()" class="pull-right">
                    </div>
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-3 col-md-9">
                    <button type="submit" class="btn btn-primary">注了个册</button>
                    <button type="reset" class="btn btn-danger pull-right">清空重填</button>
                </div>
            </div>

        </form>
    </div>
    <!-- 注册结束 -->
    <script>
        $(function(){
            var register = false;
            //验证用户名
            $("#user").blur(function(){
                var username = $("#user").val();
                var userRegx = /^[a-zA-Z]\w{3,14}$/;
                if(!userRegx.test(username)){
                    $("#user").siblings().css("color","red");
                    register = false;
                }else{
                    $("#user").siblings().css("color","#31708f");
                    register = true;
                }
            })
            //验证密码
            $("#pwd").blur(function(){
                var pwd = $("#pwd").val();
                var pwdRegx = /^\S{4,20}$/;
                if(!pwdRegx.test(pwd)){
                    $("#pwd").siblings().css("color","red");
                    register = false;
                }else{
                    $("#pwd").siblings().css("color","#31708f");
                    register = true;
                }
            })
            //验证第二次输入的密码是否与之前一致
            $("#repwd").blur(function(){
                var repwd = $("#repwd").val();
                var pwd = $("#pwd").val();
                if(repwd != pwd){
                    $("#repwd").siblings().css("color","red");
                    register = false;
                }else{
                    $("#repwd").siblings().css("color","#31708f");
                    register = true;
                }
            })
            //验证手机号
            $("#tel").blur(function(){
                var tel = $("#tel").val();
                var telRegx = /^1\d{10}$/;
                if(!telRegx.test(tel)){
                    $("#tel").siblings().css("color","red");
                    register = false;
                }else{
                    $("#tel").siblings().css("color","#31708f");
                    register = true;
                }
            })
            //验证邮箱
            $("#email").blur(function(){
                var email = $("#email").val();
                var emailRegx = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/;
                if(!emailRegx.test(email)){
                    $("#email").siblings().css("color","red");
                    register = false;
                }else{
                    $("#email").siblings().css("color","#31708f");
                    register = true;
                }
            })
            //如果上面有一个验证不通过,就不提交表单
            $("#register").submit(function(){
                //如果输入框有空值的,不提交表单
                if($("#user").val() == "" || $("#pwd").val() == "" || $("#repwd").val() == "" || $("#tel").val() == "" || $("#email").val() == ""){
                    return false;
                }
                    return register;
            })


        })
    </script>
</block>

